<template>
  <div class="parkIndex">
    <el-form class="elForm" ref="form" :model="form">
      <el-form-item label="车位名:" prop="parkname">
        <el-input class="input" v-model="form.parkname" placeholder="请输入车位名"></el-input>
      </el-form-item>
      <el-form-item label="车位金额:" prop="parkpay">
        <el-input class="input" v-model="form.parkpay" placeholder="请输入车位金额"></el-input>
      </el-form-item>

      <el-form-item label="车位类型:" prop="parktype">
        <el-select v-model="str3" style="width: 300px" clearable placeholder="请选择车位类型">
          <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="车位状态:" prop="parkstatus">
        <el-select v-model="str4" style="width: 300px" clearable placeholder="请选择车位状态">
          <el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-button @click="onSubmit" class="btn1" type="primary" icon="el-icon-search">
        查询
      </el-button>
      <el-button @click="resetForm" class="btn1" type="primary" icon="el-icon-edit">
        重置
      </el-button>
    </el-form>
    <el-form>
      <div class="parkIndex-right">
        <h1>车位列表</h1>
        <el-button @click="handleAdd" icon="el-icon-plus" type="success">新增</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="parkname" label="车位名称" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.parkname == null">暂无</span>
            <span v-else>{{ scope.row.parkname }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="parkpay" label="车位金额">
          <template slot-scope="scope">
            <span v-if="scope.row.parkpay == null">暂无</span>
            <span v-else>{{ scope.row.parkpay }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="parktype" label="车位类型">
          <template v-slot="scope">
            <el-switch @change="parkType1(scope.row)" v-model="scope.row.parktype" active-text="地下" inactive-text="地上"
              :active-value="1" :inactive-value="2">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="parkstatus" label="车位状态">
          <template v-slot="scope">
            <el-switch @change="parkType2(scope.row)" v-model="scope.row.parkstatus" active-text="已有车" inactive-text="未有车"
              :active-value="1" :inactive-value="2">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template v-slot="scope">
            <el-button @click="handleDrawer()" icon="el-icon-share" type="info" size="mini"
              :disabled="scope.row.parkstatus == 1" plain>分配车位</el-button>
            <el-button @click="handleEdit(scope.row)" icon="el-icon-edit" type="primary" size="mini"
              plain>编辑</el-button>
            <el-button @click="handleDel(scope.row)" icon="el-icon-delete" type="danger" size="mini"
              plain>移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage4" :page-sizes="[10, 50, 100, 200]" :page-size="10"
        layout="total, sizes, prev, pager, next, jumper" :total="this.obj.total">
      </el-pagination>
    </el-form>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-form ref="forms" :model="forms" label-width="80px">
        <el-form-item label="车位名称" prop="parkname">
          <el-input v-model="forms.parkname"></el-input>
        </el-form-item>

        <el-form-item label="车位金额" prop="parkpay">
          <el-input v-model="forms.parkpay"></el-input>
        </el-form-item>

        <el-form-item class="input" label="车位类型:" prop="parktype">
          <el-select v-model="str1" clearable placeholder="请选择车位类型">
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="input" label="车位状态:" prop="parkstatus">
          <el-select v-model="str2" clearable placeholder="请选择车位状态">
            <el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd1">确 定</el-button>
        <el-button type="primary" @click="resetForm">重 置</el-button>
      </span>
    </el-dialog>
    <!-- 抽屉 -->
    <el-drawer style="width: 167%" title="车位分配" :visible.sync="drawer" :direction="direction"
      :before-close="handleClose">
      <el-table border ref="multipleTable" :data="tableDatas" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" width="60">
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column prop="username" label="用户账号" width="120">
        </el-table-column>

        <el-table-column prop="homeaddress" label="家庭住址" show-overflow-tooltip>
        </el-table-column>

        <el-table-column prop="type" label="类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.type == '1'">管理员</span>
            <span v-else>普通用户</span>
          </template>
        </el-table-column>

        <el-table-column prop="parkname" label="车位" show-overflow-tooltip>
        </el-table-column>
      </el-table>

      <el-pagination style="margin-top: 20px" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[10, 50, 100, 200]"
        :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="this.obj.totals">
      </el-pagination>

      <el-button class="btn2" style="width:140px" @click="drawer = false">取 消</el-button>
      <el-button style="width:140px" type="primary" @click="handleFpcw">确 定</el-button>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ids: null,
      str1: "",
      str2: "",
      str3: "",
      str4: "",
      title: "新增车位",
      value1: true,
      value2: false,
      direction: "ltr",
      drawer: false, //抽屉
      dialogVisible: false,
      currentPage4: 1,
      form: {
        parkname: "",
        parkpay: "",
        parktype: "",
        parkstatus: "",
        currPage: 1,
        pageNum: 10,
      },
      forms: {
        parkname: "",
        parkpay: "",
        parktype: "",
        parkstatus: "",
      },
      options: [
        {
          value: 2,
          label: "地上",
        },
        {
          value: 1,
          label: "地下",
        },
      ],
      options2: [
        {
          value: 2,
          label: "未有车",
        },
        {
          value: 1,
          label: "已有车",
        },
      ],
      obj: {
        // 页码
        page: 1,
        // 每页多少条
        rows: 10,
        // 默认选中哪一页
        currentPage: 1,
        // 定义总条数
        total: null,
        totals: null,
      },
      multipleSelection: [],
      tableData: [],
      tableDatas: [],
      fpcw1: {
        u_id: null,
        parkId: null,
        parkstatus: null
      },
      fpcw2: {
        u_id: null,
        parktype: null,
        parkstatus: null
      }
    };
  },
  methods: {
    handleClick() {
      this.$Axios({
        url: "/parking/getParkData",
        method: "get",
        data: {
          parkname: "",
          parkpay: "",
          parktype: "",
          parkstatus: "",
          currPage: this.obj.page - 1,
          pageNum: this.obj.rows,
        },
        success: (result) => {
          setTimeout(() => {
            this.obj.total = result.total;
            this.tableData = result.data;
          }, 200);
        },
      });
      this.$Axios({
        url: "/users/getUsersData",
        method: "get",
        data: {
          currPage: this.obj.page - 1,
          pageNum: this.obj.rows,
        },
        success: (result) => {
          setTimeout(() => {
            this.obj.totals = result.total;
            this.tableDatas = result.data;
          }, 200);
        },
      });
    },
    //查询
    onSubmit() {
      this.$Axios({
        url: "/parking/getParkData",
        method: "get",
        data: {
          parkname: this.form.parkname,
          parkpay: this.form.parkpay,
          parktype: this.str3,
          parkstatus: this.srt4,
          currPage: this.obj.page - 1,
          pageNum: this.obj.rows,
        },
        success: (result) => {
          setTimeout(() => {
            this.obj.total = result.total;
            this.tableData = result.data;
          }, 200);
        },
      });
    },
    //清空内容
    resetForm() {
      // 清空验证并清空内容
      this.$refs["form"].resetFields();
      this.$refs["forms"].resetFields();
      this.str3 = null;
      this.str4 = null;
      this.str1 = null;
      this.str2 = null;
    },
    //车位类型
    parkType1(row) {
      this.$Axios({
        url: "/parking/editParkData",
        method: "post",
        data: {
          u_id: row.id,
          parkname: row.parkname,
          parkpay: row.parkpay,
          parktype: row.parktype,
          parkstatus: row.parkstatus,
        },
        success: (result) => {
          setTimeout(() => {
            this.$message({
              message: "智能设备状态成功",
              type: "success",
            });
            this.handleClick();
          }, 200);
        },
      });
    },
    //车位状态
    parkType2(row) {
      this.$Axios({
        url: "/parking/editParkData",
        method: "post",
        data: {
          u_id: row.id,
          parkname: row.parkname,
          parkpay: row.parkpay,
          parktype: row.parktype,
          parkstatus: row.parkstatus,
        },
        success: (result) => {
          setTimeout(() => {
            this.$message({
              message: "智能设备状态成功",
              type: "success",
            });
            this.handleClick();
          }, 200);
        },
      });
    },
    //删除
    handleDel(row) {
      this.$confirm("确定删除该车位？", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$Axios({
            url: "/parking/delParkData",
            method: "get",
            data: {
              id: row.id,
            },
            success: (result) => {
              setTimeout(() => {
                this.$message({
                  message: "删除该车位成功",
                  type: "success",
                });
                this.handleClick();
              }, 200);
            },
          });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "已取消删除该车位" : "停留在当前页面",
          });
        });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.obj.rows = val;
      this.handleClick();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.obj.page = val;
      this.handleClick();
    },
    //添加/编辑确定
    handleAdd1() {
      if (this.title == "新增车位") {
        this.$Axios({
          url: "/parking/addParkData",
          method: "post",
          data: {
            parkname: this.forms.parkname,
            parkpay: this.forms.parkpay,
            parktype: this.str1,
            parkstatus: this.str2,
          },
          success: (result) => {
            setTimeout(() => {
              this.$message({
                message: "车位修改成功",
                type: "success",
              });
              this.dialogVisible = false;
              this.handleClick();
            }, 200);
          },
        });
      } else {
        this.$Axios({
          url: "/parking/editParkData",
          method: "post",
          data: {
            u_id: this.ids,
            parkname: this.forms.parkname,
            parkpay: this.forms.parkpay,
            parktype: this.str1,
            parkstatus: this.str2,
          },
          success: (result) => {
            setTimeout(() => {
              this.$message({
                message: "车位修改成功",
                type: "success",
              });
              this.dialogVisible = false;
              this.handleClick();
            }, 200);
          },
        });
      }
    },
    //添加
    handleAdd() {
      this.title='新增车位'
      (this.dialogVisible = true),
        this.$nextTick(() => {
          this.$refs["forms"].resetFields();
        });
      (this.str1 = null), (this.str2 = null);
    },
    //编辑
    handleEdit(row) {
      (this.ids = row.id),
        (this.dialogVisible = true),
        (this.title = "车位修改"),
        (this.forms.parkname = row.parkname),
        (this.forms.parkpay = row.parkpay),
        (this.str1 = row.parktype),
        (this.str2 = row.parkstatus);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    //分配车位
    handleDrawer() {
      this.drawer = true;
    },
    //分配车位确定
    handleFpcw() {
      this.$Axios({
        url: "/users/updateParkStatus",
        method: "post",
        data: this.fpcw1,
        success: (result) => {
          this.$Axios({
            url: "/parking/editParkData",
            method: "post",
            data: this.fpcw2,
            success: (result) => {
              setTimeout(() => {
                this.$message({
                  message: "分配车位成功",
                  type: "success",
                });

                this.handleClick();
                this.drawer = false;
              }, 200);
            },
          });
        },
      });

    },
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach((row) => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection();
    //   }
    // },
    handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
      } else {
        this.listCar = val;
      }

      this.fpcw1.u_id = val[0].id
      this.fpcw1.parkId = val[0].parkId
      this.fpcw1.parkstatus = val[0].parkstatus
      this.fpcw2.type = val[0].type
      this.fpcw2.parkId = val[0].parkId
      this.fpcw2.parkstatus = val[0].parkstatus
    },

  },

  mounted() {
    this.handleClick();
  },
};
</script>
<style lang="scss" scoped>
.parkIndex::v-deep {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;

  .el-form-item {
    margin-bottom: 30px;
  }
  .el-select{
    width: 100%;
  }
  .input {
    // margin-bottom: 20px;
    // width: 300px;
    // margin-right: 15px;
    display: block;
  }

  .btn1 {
    margin-left: 20px;
    margin-top: 40px;
    width: 120px;
  }

  .btn2 {
    margin: 40px 30px 0 260px;
  }
  .has-gutter{
    tr{
      th{
        background: #eef1f6;
        text-align: center;
        color: #000;
        font-size: 14px;
        border-right-color: #ddd;
      }
    }
  }
  .el-table__row{
    td{
      text-align: center;
    }
  }

  .parkIndex-right {
    display: flex;
    justify-content: space-between;
    width: 1150px;
    margin-bottom: 10px;
  }

  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-drawer {
    // padding: 0 20px;
  }
}
</style>
